<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>换届信息添加页面</title>
  <link rel="stylesheet" href="../../yl/index.css" />
  <!-- 布局样式 -->
  <link rel="stylesheet" href="../../yl/style.css" />
  <link rel="stylesheet" href="../../yl/mobile.css" />
  <link rel="stylesheet" href="../../yl/easyui.css" />
  <link rel="stylesheet" href="../../yl/icon.css" />
  <style>
    .el-table tr {
      height: 60px;
    }

    .el-table th.el-table__cell {
      background-color: #f5f7fa !important;
      color: #606266;
    }

    .el-table__row .cell {
      display: flex;
      align-items: center;
    }
  </style>
</head>

<body>
  <!-- <div id="app"> -->
  <div class="easyui-navpanel" id="app" v-cloak>
    <header>
      <div class="m-toolbar">
        <div class="m-title">{{action=='Add'?'添加换届信息':action=='Modify'?'修改换届信息':''}}</div>
      </div>
    </header>
    <div class="easyui-navpanel panel-body panel-body-nobottom panel-body-noborder" style="height: 3000px"
      id="MainTable" ref="MainTable"
      :data-options="JSON.stringify({ 'TableName': 'village_organization_tenure', 'form': 'dataForm','primary_key':'Tenure_SerialNumber' })">
      <div class="yl-main">
        <div class="table_titel">
          <div class="titel">换届信息</div>
        </div>
        <el-form :model="dataForm" ref="form" inline-message="true" style="width: 100%">
          <el-descriptions :column="1" size="large" border>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">村集体</div>
              </template>
              <el-form-item prop="VillageNumber"
                :rules="[{ required: true, message: '请选择村集体', trigger: 'change' }]">
                <yl-cascader @change="changeOrganization" v-model="dataForm.VillageNumber"  placeholder="请选择村集体" :options="city" 
                  :props="{ value:'ProvinceNumber', label:'Province'}"></yl-cascader>
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">任期</div>
              </template>
              <el-form-item prop="Tenure" :rules="[{ required: true, message: '请选择任期（选择党组后自动匹配）', trigger: 'blur' }]">
                <el-input disabled v-model="dataForm.Tenure" class="borderless-input" placeholder="请输入任期" />
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">任期开始时间</div>
              </template>
              <el-form-item prop="Start_Date" :rules="[{ required: true, message: '请选择任期开始日期', trigger: 'change' }]">
                <el-date-picker :disabled="dataForm.Tenure!='第一任'" v-model="dataForm.Start_Date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                  class="borderless-input" type="date" placeholder="请选择任期开始日期" size="large" />
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">任期结束时间</div>
              </template>
              <el-form-item prop="End_Date" :rules="[{ required: true, validator:End_Date_Validity, trigger: 'change' }]">
                <el-date-picker v-model="dataForm.End_Date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                  class="borderless-input" type="date" placeholder="请选择任期结束日期" size="large" />
              </el-form-item>
            </el-descriptions-item>
          </el-descriptions>
        </el-form>
        <div class="table_titel">
          <div class="titel">领导班子换届结构</div>
          <div class="operation">
            <el-button type="primary" size="small" @click="handleAdd(false)">新增</el-button>
          </div>
        </div>
        <el-table :data="dataForm1" height="450" default-expand-all row-key="id" border
          default-expand-all :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
          <el-table-column prop="date" label="职务">
            <template v-slot="{row}">
              <el-select v-model="row.Village_Position_SerialNumber"
                  placeholder="请选择职务" size="large">
                  <el-option v-for="(item,index) in village_position" :key="index" :label="item.Village_Position"
                    :value="item.Village_Position_SerialNumber" />
                </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="人数">
            <template v-slot="{row}">
              <el-input-number class="borderless-input" v-model="row.Position_Number" placeholder="请输入人数" />
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template v-slot="{row,$index}">
              <el-button type="primary" size="small" @click="handleAdd(row)">新增副职</el-button>
              <el-button type="danger" size="small" @click="handleRemove(row)">移除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <footer class="botton-ann">
      <el-button @click="goBack">返回</el-button>
      <el-button type="primary" plain @click="handleSubmit" :loading="loading">提交</el-button>
    </footer>
  </div>
</body>
<script src="../../yl/vue.js"></script>
<script src="../../config/config.js"></script>
<script src="../../utils/utils.js"></script>
<script src="../../utils/mixins.js"></script>
<script src="../../yl/index.js"></script>
<script src="../../yl/zh-cn.mjs"></script>
<script src="../../yl/index.iife.min.js"></script>
<script src="../../yl/jquery.min.js"></script>
<script src="../../utils/jquery.cookie.js"></script>
<script src="../../yl/jquery.easyui.min.js"></script>
<script src="../../yl/jquery.easyui.mobile.js"></script>
<script src="../../yl/moment.min.js"></script>
<script src="../../api/request.js"></script>
<script src="./js/add.js"></script>

</html>